"use client"
import React, {useEffect, useState} from "react";
import {
    Button,
    Checkbox,
    Col,
    Form,
    Input,
    InputNumber,
    message,
    Modal,
    Radio,
    Row,
    Tooltip, Tree, TreeSelect,
} from 'antd';
import styles from "./index.module.css";
import { addExpression, getExpression, updateExpression } from "@/clientApi/flowable/definition/expression";
import { globalMessage } from "@/utils/message";

// 定义组件的 props 类型
interface MyComponentProps {
    open: boolean;
    title?: string;
    OnCanCle: () => void;
    id:string|undefined;

}
interface formDataType{
 
    status?:string|number,
    postSort?:string|number,
    dataType?:string|number,
}
const EditorExpressionView: React.FC<MyComponentProps> = (props) => {
    const [form] = Form.useForm();
    // 表单的值
    const [formData, setFormData] = useState<formDataType>({})
    const [menuOptions, setMenuOptions] = useState([]);


    function handleCancel() {
        props.OnCanCle()
    }
    useEffect(() => {
        if(props?.id){
            getList(props.id);
        }else{
            form.setFieldsValue({
                name: undefined,
                expression:'',
                dataType: '',
                remark:''
            });
        }
    }, [props.id]);
    const getList = (id:string) => {
        getExpression(id).then((res:any) => {
            if (res?.code === 200) {
                form.setFieldsValue({
                    name: res.data?.name || undefined,
                    expression: res.data?.expression || 0,
                    dataType: res.data?.dataType || '',
                    remark: res.data?.remark || undefined

                });
                setFormData(res.data)
            }
        });
    };

    const onValuesChange = (changedValues:any, allValues:any):void => {
        if (props.id !== undefined) {
            setFormData(prevState => ({
                ...prevState,
                ...changedValues
            }));
        } else {
            setFormData(prevState => ({
                ...allValues
            }));
        }


    };
    const handleSubmit = () => {
        // 在提交前先进行表单验证
        form.validateFields().then(values => {
            if (props.id !== undefined) {
                updateExpression(formData).then((res:any) => {
                     globalMessage().warning(res.msg).then(r => {})
                    props.OnCanCle()
                });
            } else {
                addExpression(formData).then((res:any) => {
                     globalMessage().warning(res.msg).then(r => {})
                    props.OnCanCle()
                });
            }
        }).catch(errorInfo => {
            // 如果验证失败，则不执行提交操作
        });
    }




    return (
        <>
            <Modal
                forceRender
                open={props.open}
                title={props.title}
                footer={null}
                onCancel={() => {
                    props.OnCanCle()
                }}
            >
                <Form
                    form={form}
                    name="editorDept_form"
                    style={{maxWidth: 600}}
                    onValuesChange={onValuesChange}>
                    <Row gutter={10}>
                        <Col span={24}>
                            <Form.Item
                                label="名称"
                                name="name"
                                labelCol={{span: 5,}}
                                rules={[
                                    {required: true, message: '请输入表达式名称!'},
                                ]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item
                                label="内容"
                                name="expression"
                                labelCol={{span: 5,}}
                                rules={[
                                    {required: true, message: '请输入表达式内容例：${内容}!'},
                                ]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item
                                labelCol={{span: 5,}}
                                label={"类型"}
                                name="dataType"
                            >
                                <Radio.Group value={formData.dataType} defaultValue={"0"}>
                                    <Radio value={"0"}>正常</Radio>
                                    <Radio value={"1"}>停用</Radio>
                                </Radio.Group>
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item
                                labelCol={{span: 4,}}
                                label="备注"
                                name="remark"
                            >
                                <Input.TextArea/>
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item
                                wrapperCol={{offset: 16, span: 8}}
                            >
                                <div className={styles.buttonClass}>
                                    <Button type="primary" htmlType="submit" onClick={handleSubmit}>确认</Button>
                                    <Button type="primary" onClick={handleCancel}>取消</Button>
                                </div>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Modal>

        </>
    )
};
export default EditorExpressionView;
